<template>
    <div>
        <Top  @addThing="addThing"/>
        <Nodo :noDo="noDo" @deleteThing="deleteThing" @doneThing="doneThing"/>
        <Done :yesDo="yesDo" @deleteThing="deleteThing" @noDoThing="noDoThing"/>
        
    </div>
</template>
<script>
import Top from './top.vue'
import Nodo from './nodo.vue'
import Done from './done.vue'
export default {
    components:{
        Top,Nodo,Done
    },
    data(){
        return {
            noDo:[],
            yesDo:[]
        }
    },
    methods:{
        addThing(val){
            //把输入好的事项添加进代办事项的数组中
            this.noDo.push(val);
        },
        // 删除事项
        deleteThing(index,type){
            // 要从代办事项的数组中移除
            this[type].splice(index,1)
        },

        // 点击事项已完成按钮
        doneThing(index,i){

            //第一步是把事项添加到已完成数组中
             this.yesDo.push(i)
            //  要从代办事项的数组中移除
             this.noDo.splice(index,1)
        },
        
        // 点击代办按钮
        noDoThing(index,i){
            //第一步是把事项添加到代办事项的数组中
             this.noDo.push(i)
            // 要从已完成事项的数组中移除
             this.yesDo.splice(index,1)
        }
    }
}
</script>
<style>

.tag{
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    margin: 0 10px;
    background: #ddd;
}
.txt_out{
    margin-bottom:15px ;
}
.txt{
    width: 200px;
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

</style>
